<template>
  <div class="forget">
    <div class="register-container">
      <h1 class="title">找回密码</h1>
      <el-card class="box-card" style="background: rgba(255, 255, 255, 0.8)" shadow="hover" >
        <el-steps  :active="active" finish-status="success" align-center style="width: 540px; margin-left: -53px" >
          <el-step title="确认账号"> </el-step>
          <el-step title="重置密码"> </el-step>
          <el-step title="重置成功"> </el-step>
        </el-steps>
        <div style="margin-top: 30px">
          <el-form :model="utform" ref="utform" :rules="rules"  validate-on-rule-change>

            <div v-if="active == 0">
              <el-form-item prop="username">
                <el-input v-model="utform.username" placeholder="用户名" prefix-icon="el-icon-user" size="medium" @blur="validateHandler('username')" />
              </el-form-item>
              <el-form-item prop="phone">
                <el-input v-model="utform.phone" placeholder="电话" prefix-icon="el-icon-phone-outline" size="medium" @blur="validateHandler('phone')" />
              </el-form-item>
              <el-form-item>
                <el-button type="primary" style="width: 100%" @click="existUsername" >确定</el-button>
              </el-form-item>
            </div>

            <div v-if="active == 1">
              <el-form-item prop="username">
                <el-input disabled v-model="utform.username" size="medium" />
              </el-form-item>
              <el-form-item prop="password">
                <el-input v-model="utform.password" placeholder="新密码" type="password" prefix-icon="el-icon-lock" size="medium" clearable @blur="validateHandler('password')" />
              </el-form-item>
              <el-form-item prop="password2">
                <el-input v-model="utform.password2" placeholder="确认新密码" type="password" prefix-icon="el-icon-lock" size="medium" clearable @blur="validateHandler('password2')"/>
              </el-form-item>
              <!--            <el-form-item prop="code" v-show="false">-->
              <!--              <el-input v-model="utform.code" autocomplete="off" placeholder="验证码" prefix-icon="el-icon-key" size="medium" clearable-->
              <!--                        style="top: 2px; width: 300px; height: 36px" @blur="validateHandler('code')" />-->
              <!--              <el-button id="code" type="primary">-->
              <!--                <span v-if="isCodeShow" @click="sendEmailCode()">获取验证码</span>-->
              <!--                <span v-else>{{ count }} 秒后重新获取</span>-->
              <!--              </el-button>-->
              <!--            </el-form-item>-->
              <el-button  @click="resetPassword" size="medium" type="primary" style="width: 100%;margin:5px 0 15px 0;" >确定修改</el-button>
            </div>

            <div v-if="active == 3" style="text-align: center">
              <h2 style="margin-bottom: 20px; color: black">
                密码重置成功，请重新登录！
              </h2>
              <el-button @click="turnLogin" size="medium">重新登录</el-button
              >
            </div>

          </el-form>
        </div>
        <div class="login-form-footer">
          <el-link href="/login" style="font-weight: bolder;font-size: 16px;color: #91949c;margin-left: 150px"
                   :underline="false">
            记起来了 返回登录
            <i style="font-weight: bolder;font-size: 15px" class="el-icon-right"></i>
          </el-link>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        existUsernameFlag: 0,
        active: 0,
        isCodeShow: true,
        count: 0,
        timer: {},
        utform: {
          phone: '',
          username: "",
          code: "",
          password: "",
          password2: "",
        },
        rules: {
          username: [
            {required: true, message: "用户名不能为空", trigger: "blur" },
            {required: true, min: 6,message: "用户名不少于6位数",trigger: "blur"},
          ],
          phone: [
            { required: true, message: '联系电话不能为空！', trigger: 'blur' },
            {
              validator: function(rule, value, callback) {
                if (/^1[34578]\d{9}$/.test(value) == false) {
                  callback(new Error("手机号格式错误"));
                } else {
                  callback();
                }
              },
              trigger: "change"
            }
          ],
          password: [
            {required: true, message: "密码不能为空", trigger: "blur" },
            {pattern: /[~!@#$%^&*\_.0-9a-zA-Z]{6,16}$/,message: "密码由英文字母、数字或标点符号组成的6-16位字符",trigger: "blur"},
          ],
          password2: [
            {required: true, message: "确认密码不能为空", trigger: "blur" },
            {validator: this.validatePassword, trigger: "blur"},
          ],
        },
      };
    },
    methods: {
      turnLogin(){
        this.$router.push('/login')
      },
      validateHandler(fieldName) {
        this.$refs.utform.validateField(fieldName);
      },
      existUsername() {
        let valid;
        this.$refs.utform.validate((v) => (valid = v));
        if (!valid){return;}
        console.log('ddd')
        this.$axios
          .get("/api/cp/user/findByUserName?username=" + this.utform.username + "&phone=" + this.utform.phone)
          .then((res) => {
            let exist = false;
            if (res.data.data != null) {
              exist = true;
            }

            this.existUsernameFlag = exist ? 2 : 1;
            if (exist) {
              this.active = 1;
            } else {
              this.$message.error("用户信息不存在 或 用户信息填写错误!");
            }
          });
      },
      resetPassword() {
        this.$refs.utform.validate((valid) => {
          if (!valid){return;}
          let params = {
            phone: this.utform.phone,
            username: this.utform.username,
            code: this.utform.code,
            password: this.utform.password,
            password2: this.utform.password2,
          };
          this.$axios
            .post("/api/cp/user/reset", params)
            .then((res) => {
              this.active = 3;
            })
            .catch((error) => {
              let errMsg = error.response.data.msg;
              this.$message.error(errMsg);
            });
        });
      },
      validatePassword(rule, value, callback){
        if (value == "") {
          callback(new Error("请再次输入密码"));
        } else if (value !== this.utform.password) {
          callback(new Error("两次输入密码不一致!"));
        } else {
          callback();
        }
      },
      validateEmail(rule, value, callback){
        if (!value) {
          callback(new Error("用户名不能为空"));
        }
        const regEmail = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/;
        const regphone = /^[1][3,4,5,6.7,8,9][0-9]{9}$/;
        if (value.match(regEmail) || value.match(regphone)) {
          callback();
        } else {
          callback(new Error("请输入正确的邮箱/手机号"));
        }
      },

      getQueryParam(name){
        var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i');
        var r = window.location.search.substr(1).match(reg);
        if (r != null) {
          return unescape(r[2]);
        }
        return null;
      },
    }
  };
</script>

<style scoped>
  .forget {
    width: 100%;
    height: 100%;
    background: #FFFFFF;
    background-position: left;
    background-size: cover;
    background-image: url("../assets/img/login-bg.png");
  }

  .register-container {
    width: 500px;
    height: 450px;

    transform: translate(-50%, -60%);
    position: absolute;
    left: 65%;
    top: 50%;
    /* background: violet; */
  }
  .title {
    color: black;
    letter-spacing: 2px;
    text-align: center;
    margin-bottom: 50px;
  }
  #code {
    width: 120px;
    height: 36px;
    margin-left: 33px;
  }
  .el-button {
    background-color: #a93ac2;
    border: 1px solid #a93ac2;
    color: white;
  }
</style>
